<!DOCTYPE html>
<html lang="en">

<head>
	<title>three.js webgl - cameras - logarithmic depth buffer</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link type="text/css" rel="stylesheet" href="../main.css">
	<style>
		body {
			touch-action: none;
		}

		.renderer_label {
			position: absolute;
			bottom: 1em;
			width: 100%;
			color: white;
			z-index: 10;
			display: block;
			text-align: center;
		}

		#container {
			display: flex;
		}

		#container_normal {
			width: 50%;
			display: inline-block;
			position: relative;
		}

		#container_logzbuf {
			width: 50%;
			display: inline-block;
			position: relative;
		}

		#renderer_border {
			position: absolute;
			top: 0;
			left: 25%;
			bottom: 0;
			width: 2px;
			z-index: 10;
			opacity: .8;
			background: #ccc;
			border: 1px inset #ccc;
			cursor: col-resize;
		}
	</style>
</head>

<body>

	<div id="container">
		<div id="container_normal">
			<h2 class="renderer_label">normal z-buffer</h2>
		</div>
		<div id="container_logzbuf">
			<h2 class="renderer_label">logarithmic z-buffer</h2>
		</div>
		<div id="renderer_border"></div>
	</div>

	<div id="info">
		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - cameras - logarithmic depth
		buffer<br />
		mousewheel to dolly out
	</div>


	<script type="module" src="./webgl_camera_logarithmicdepthbuffer.ts"></script>
</body>

</html>